<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-form
      ref="form"
      class="bookForm"
      label-width="80px"
      :model="form"
      :rules="rules"
    >
      <el-form-item
        label="姓名"
        prop="list[0].customer_name"
        :rules="rules.customer_name"
      >
        <el-input
          v-model="form.list[0].customer_name"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item
        label="联系方式"
        prop="list[0].customer_mobile"
        :rules="rules.customer_mobile"
      >
        <el-input
          v-model="form.list[0].customer_mobile"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item
        label="证件号"
        prop="list[0].customer_idcard"
        :rules="rules.customer_idcard"
      >
        <el-input
          v-model="form.list[0].customer_idcard"
          placeholder="请输入身份证号"
        />
      </el-form-item>
      <div class="inline">
        <el-form-item label="预定周期" prop="start_date">
          <el-date-picker
            v-model="form.start_date"
            format="yyyy-MM-dd"
            placeholder="请选择开始日期"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <span class="daterange">--</span>
        <el-form-item label-width="0" prop="end_date">
          <el-date-picker
            v-model="form.end_date"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            placeholder="请选择结束日期"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </div>
      <el-form-item label="备注">
        <el-input
          v-model="form.field_value"
          maxlength="150"
          placeholder="请填写备注信息"
          :rows="5"
          show-word-limit
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { addBook } from '@/api/rent'
  import { isPhone, isIdCard } from '@/utils/validate'
  export default {
    name: 'RoomDesc',
    data() {
      const validatePhone = (rule, value, callback) => {
        if (!isPhone(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
      const validateIdCard = (rule, value, callback) => {
        if (value && !isIdCard(value)) {
          callback(new Error('请输入正确的身份证号'))
        } else {
          callback()
        }
      }
      return {
        form: {
          room_id: '',
          start_date: '',
          end_date: '',
          rent_remark: '',
          customer_list: '',
          list: [
            {
              customer_type: '1',
              customer_mobile: '',
              customer_name: '',
              customer_idcard: '',
            },
          ],
        },
        rules: {
          customer_name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
          customer_mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { validator: validatePhone, trigger: 'blur' },
          ],
          customer_idcard: [{ validator: validateIdCard, trigger: 'change' }],
          start_date: [
            {
              required: true,
              message: '请选择开始日期',
              trigger: ['blur', 'change'],
            },
          ],
          end_date: [
            {
              required: true,
              message: '请选择结束日期',
              trigger: ['blur', 'change'],
            },
          ],
        },
        title: '添加预定',
        dialogFormVisible: false,
      }
    },
    computed: {
      pickerOptions() {
        let startDateVal = this.form.start_date
        return {
          disabledDate(time) {
            return time.getTime() < new Date(startDateVal).getTime()
          },
        }
      },
    },
    methods: {
      showEdit(id) {
        this.form.room_id = id
        this.dialogFormVisible = true
      },
      close() {
        this.form = this.$options.data().form
        this.$refs['form'].resetFields()
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            let formData = Object.assign({}, this.form)
            formData.customer_list = JSON.stringify(formData.list)
            const { data } = await addBook(formData)
            if (data.is_success) {
              this.$baseMessage(
                '预定成功',
                'success',
                'vab-hey-message-success'
              )
              this.$emit('fetch-data')
              this.close()
            }
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .bookForm {
    .inline {
      display: flex;
      .el-input {
        width: 175px;
      }
      .daterange {
        width: 30px;
        line-height: 32px;
        text-align: center;
      }
    }
  }
</style>
